Frontend Performans API'si: Navigation ve Resource Timing'de Uzmanlaşma

Günümüz dijital dünyasında web sitesi performansı her şeyden önemlidir. Yavaş bir web sitesi, hayal kırıklığına uğramış kullanıcılara, daha yüksek hemen çıkma oranlarına ve nihayetinde gelir kaybına yol açabilir. Frontend Performans API'si, web sitenizin performansının çeşitli yönlerini ölçmek ve analiz etmek için güçlü araçlar sunarak darboğazları belirlemenize ve daha hızlı, daha duyarlı bir kullanıcı deneyimi için optimize etmenize olanak tanır. Bu kapsamlı kılavuz, dünya çapındaki geliştiriciler için pratik örnekler ve eyleme geçirilebilir içgörüler sunarak Navigation ve Resource Timing API'lerini keşfedecektir.

Performans İzleme İhtiyacını Anlamak

API'nin özelliklerine dalmadan önce, performans izlemenin neden çok önemli olduğunu anlayalım:

• Kullanıcı Deneyimi: Hızlı bir web sitesi daha iyi bir kullanıcı deneyimi sağlar, kullanıcı memnuniyetini ve etkileşimini artırır.
• Arama Motoru Optimizasyonu (SEO): Google gibi arama motorları, web sitesi hızını bir sıralama faktörü olarak kabul eder.
• Dönüşüm Oranları: Daha hızlı web siteleri genellikle daha yüksek dönüşüm oranlarına sahiptir. Web sitesi duyarlıysa, kullanıcıların bir satın alma işlemini tamamlama veya bir hizmete kaydolma olasılığı daha yüksektir.
• Mobil Performans: Mobil cihazların artan kullanımıyla, mobil performans için optimizasyon yapmak esastır.
• Küresel Erişim: Dünyanın farklı yerlerindeki kullanıcılar, değişen ağ koşulları yaşayabilir. Performans izleme, konumlarından bağımsız olarak tüm kullanıcılar için tutarlı bir deneyim sağlamaya yardımcı olur.

Frontend Performans API'si ile Tanışma

Frontend Performans API'si, bir web sayfasının ayrıntılı performans metriklerine erişim sağlayan bir JavaScript arayüzleri koleksiyonudur. Geliştiricilerin bir sayfanın yüklenmesi, kaynakların alınması ve olayların işlenmesi için geçen süreyi ölçmelerine olanak tanır. Bu bilgiler, performans darboğazlarını belirlemek ve daha iyi bir kullanıcı deneyimi için web sitesini optimize etmek amacıyla kullanılabilir.

Temel arayüz, window.performance aracılığıyla erişilebilen Performance'dır. Bu arayüz, çeşitli performansla ilgili verilere erişmek için yöntemler ve özellikler sağlar.

Navigation Timing API'si: Sayfa Yükleme Performansını Ölçme

Navigation Timing API'si, sayfa yükleme sürecinin farklı aşamaları hakkında ayrıntılı zamanlama bilgileri sağlar. Bu, gecikmelerin tam olarak nerede meydana geldiğini belirlemenize ve optimizasyon çabalarınızı buna göre odaklamanıza olanak tanır.

Navigation Timing Tarafından Sağlanan Temel Metrikler

• navigationStart: Tarayıcının sayfayı yüklemeye başladığı anın zaman damgası.
• unloadEventStart: Önceki sayfada unload olayının başladığı anın zaman damgası.
• unloadEventEnd: Önceki sayfada unload olayının bittiği anın zaman damgası.
• redirectStart: Yönlendirmenin başladığı anın zaman damgası.
• redirectEnd: Yönlendirmenin bittiği anın zaman damgası.
• fetchStart: Tarayıcının belgeyi getirmeye başladığı anın zaman damgası.
• domainLookupStart: Alan adı aramasının başladığı anın zaman damgası.
• domainLookupEnd: Alan adı aramasının bittiği anın zaman damgası.
• connectStart: Tarayıcının sunucuya bağlantı kurmaya başladığı anın zaman damgası.
• connectEnd: Tarayıcının sunucuya bağlantı kurmayı bitirdiği anın zaman damgası.
• secureConnectionStart: Tarayıcının güvenli bağlantı el sıkışmasını başlattığı anın zaman damgası.
• requestStart: Tarayıcının sunucudan belgeyi istemeye başladığı anın zaman damgası.
• responseStart: Tarayıcının sunucudan yanıtın ilk baytını aldığı anın zaman damgası.
• responseEnd: Tarayıcının sunucudan yanıtı almayı bitirdiği anın zaman damgası.
• domLoading: Tarayıcının HTML belgesini ayrıştırmaya başladığı anın zaman damgası.
• domInteractive: Tarayıcının HTML belgesini ayrıştırmayı bitirdiği ve DOM'un hazır olduğu anın zaman damgası.
• domContentLoadedEventStart: DOMContentLoaded olayının başladığı anın zaman damgası.
• domContentLoadedEventEnd: DOMContentLoaded olayının bittiği anın zaman damgası.
• domComplete: Tarayıcının HTML belgesini ayrıştırmayı bitirdiği ve tüm kaynakların yüklendiği anın zaman damgası.
• loadEventStart: load olayının başladığı anın zaman damgası.
• loadEventEnd: load olayının bittiği anın zaman damgası.

Navigation Timing Verilerine Erişme

Navigation Timing verilerine performance.timing özelliğini kullanarak erişebilirsiniz:

            
const navigationTiming = performance.timing;

console.log('Navigation Start:', navigationTiming.navigationStart);
console.log('Domain Lookup Time:', navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart);
console.log('Connect Time:', navigationTiming.connectEnd - navigationTiming.connectStart);
console.log('Response Time:', navigationTiming.responseEnd - navigationTiming.responseStart);
console.log('DOM Interactive:', navigationTiming.domInteractive - navigationTiming.navigationStart);
console.log('DOM Complete:', navigationTiming.domComplete - navigationTiming.navigationStart);
console.log('Load Time:', navigationTiming.loadEventEnd - navigationTiming.navigationStart);

            

              
                Copy
              
            
          

Navigation Timing Verilerini Yorumlama

Navigation Timing verilerini analiz etmek, web sitenizin performansına ilişkin değerli bilgiler ortaya çıkarabilir. Örneğin:

• Yüksek DNS Arama Süresi: DNS sağlayıcınızla ilgili olası sorunları veya yavaş DNS çözümlemesini gösterir.
• Yüksek Bağlantı Süresi: Sunucunuzun ağ bağlantısıyla ilgili sorunları veya yavaş TLS el sıkışmasını önerir.
• Yüksek Yanıt Süresi: Yavaş sunucu tarafı işlemeyi veya büyük yanıt boyutlarını gösterir.
• Yüksek DOM Etkileşimli Süresi: Verimsiz JavaScript kodunu veya karmaşık DOM yapısını önerir.
• Yüksek DOM Tamamlanma Süresi: Resimler, betikler ve stil sayfaları gibi kaynakların yavaş yüklendiğini gösterir.

Örnek: İlk Bayta Kadar Geçen Süreyi (TTFB) Hesaplama

İlk Bayta Kadar Geçen Süre (TTFB), tarayıcının sunucudan ilk veri baytını alması için geçen süreyi ölçen çok önemli bir metriktir. Düşük bir TTFB, hızlı bir kullanıcı deneyimi için esastır.

            
const ttfb = performance.timing.responseStart - performance.timing.navigationStart;
console.log('Time to First Byte (TTFB):', ttfb, 'ms');

            

              
                Copy
              
            
          

Yüksek bir TTFB, yavaş sunucu tarafı işleme, ağ gecikmesi veya sunucunun altyapısıyla ilgili sorunlardan kaynaklanabilir. Sunucu yapılandırmanızı optimize etmek, bir İçerik Dağıtım Ağı (CDN) kullanmak ve ağ gecikmesini en aza indirmek TTFB'yi azaltmaya yardımcı olabilir.

Resource Timing API'si: Kaynak Yükleme Performansını Ölçme

Resource Timing API'si, bir web sayfasındaki resimler, betikler, stil sayfaları ve yazı tipleri gibi bireysel kaynakların yüklenmesi hakkında ayrıntılı zamanlama bilgileri sağlar. Bu, hangi kaynakların yüklenmesinin en uzun sürdüğünü belirlemenize ve bunları buna göre optimize etmenize olanak tanır.

Resource Timing Tarafından Sağlanan Temel Metrikler

• name: Kaynağın URL'si.
• initiatorType: Kaynak isteğini başlatan öğenin türü (ör. img, script, link).
• startTime: Tarayıcının kaynağı getirmeye başladığı anın zaman damgası.
• redirectStart: Yönlendirmenin başladığı anın zaman damgası.
• redirectEnd: Yönlendirmenin bittiği anın zaman damgası.
• fetchStart: Tarayıcının kaynağı getirmeye başladığı anın zaman damgası.
• domainLookupStart: Alan adı aramasının başladığı anın zaman damgası.
• domainLookupEnd: Alan adı aramasının bittiği anın zaman damgası.
• connectStart: Tarayıcının sunucuya bağlantı kurmaya başladığı anın zaman damgası.
• connectEnd: Tarayıcının sunucuya bağlantı kurmayı bitirdiği anın zaman damgası.
• secureConnectionStart: Tarayıcının güvenli bağlantı el sıkışmasını başlattığı anın zaman damgası.
• requestStart: Tarayıcının sunucudan kaynağı istemeye başladığı anın zaman damgası.
• responseStart: Tarayıcının sunucudan yanıtın ilk baytını aldığı anın zaman damgası.
• responseEnd: Tarayıcının sunucudan yanıtı almayı bitirdiği anın zaman damgası.
• duration: Kaynağın yüklenmesi için geçen toplam süre.

Resource Timing Verilerine Erişme

Resource Timing verilerine performance.getEntriesByType('resource') yöntemini kullanarak erişebilirsiniz:

            
const resourceTimings = performance.getEntriesByType('resource');

resourceTimings.forEach(resource => {
  console.log('Resource Name:', resource.name);
  console.log('Initiator Type:', resource.initiatorType);
  console.log('Duration:', resource.duration, 'ms');
});

            

              
                Copy
              
            
          

Resource Timing Verilerini Yorumlama

Resource Timing verilerini analiz etmek, yavaş yüklenen kaynakları belirlemenize ve daha hızlı yükleme süreleri için onları optimize etmenize yardımcı olabilir. Örneğin:

• Büyük Resimler: Resimleri sıkıştırarak ve uygun dosya formatlarını (ör. WebP) kullanarak optimize edin.
• Optimize Edilmemiş Betikler ve Stil Sayfaları: Dosya boyutlarını azaltmak için betikleri ve stil sayfalarını küçültün ve sıkıştırın.
• Yavaş Yüklenen Yazı Tipleri: Web yazı tiplerini alt kümeleyerek ve font-display özelliklerini kullanarak verimli bir şekilde kullanın.
• Üçüncü Taraf Kaynakları: Üçüncü taraf kaynaklarının performans etkisini değerlendirin ve gerekirse alternatifleri düşünün.

Örnek: Yavaş Yüklenen Resimleri Belirleme

Bu örnek, Resource Timing API'sini kullanarak yavaş yüklenen resimlerin nasıl belirleneceğini göstermektedir:

            
const resourceTimings = performance.getEntriesByType('resource');

const slowImages = resourceTimings.filter(resource => resource.initiatorType === 'img' && resource.duration > 500);

if (slowImages.length > 0) {
  console.warn('Slow-loading images detected:');
  slowImages.forEach(image => {
    console.log('Image URL:', image.name);
    console.log('Duration:', image.duration, 'ms');
  });
}

            

              
                Copy
              
            
          

Yavaş yüklenen resimleri belirledikten sonra, onları sıkıştırarak, uygun şekilde yeniden boyutlandırarak ve tembel yükleme (lazy loading) tekniklerini kullanarak optimize edebilirsiniz.

Pratik Örnekler ve Kullanım Senaryoları

Gerçek Dünya Senaryosu: E-ticaret Web Sitesi Optimizasyonu

Küresel olarak müşterilere hizmet veren bir e-ticaret web sitesi düşünün. Navigation ve Resource Timing verilerini analiz etmek aşağıdaki sorunları ortaya çıkarır:

• Asya'daki kullanıcılar için yüksek TTFB: Orijin sunucu ile Asya'daki kullanıcılar arasında yavaş sunucu tarafı işlemeyi veya ağ gecikmesini gösterir.
• Yavaş yüklenen ürün resimleri: Resimler web için optimize edilmemiş, bu da uzun yükleme sürelerine neden oluyor.
• Optimize edilmemiş JavaScript dosyaları: JavaScript dosyaları küçültülmemiş ve sıkıştırılmamış, bu da dosya boyutlarının artmasına yol açıyor.

Bu bulgulara dayanarak, aşağıdaki optimizasyonlar uygulanabilir:

• Bir İçerik Dağıtım Ağı (CDN) Uygulayın: Farklı bölgelerdeki kullanıcılar için gecikmeyi azaltmak amacıyla web sitesi içeriğini küresel olarak birden fazla sunucuya dağıtın.
• Ürün resimlerini optimize edin: ImageOptim veya TinyPNG gibi araçlar kullanarak resimleri sıkıştırın ve WebP gibi uygun dosya formatlarını kullanın.
• JavaScript dosyalarını küçültün ve sıkıştırın: JavaScript dosyalarını küçültmek için UglifyJS veya Terser gibi araçları ve onları sıkıştırmak için Gzip veya Brotli'yi kullanın.
• Resimleri tembel yükleyin (lazy load): Sayfanın ilk yüklenme süresini iyileştirmek için ekranın alt kısmında kalan resimler için tembel yükleme uygulayın.

Bu optimizasyonları uyguladıktan sonra, web sitesinin performansı önemli ölçüde artar, bu da daha iyi bir kullanıcı deneyimi, daha yüksek dönüşüm oranları ve iyileştirilmiş SEO sıralamaları ile sonuçlanır.

Mobil Performans Optimizasyonu

Mobil kullanıcılar genellikle masaüstü kullanıcılara kıyasla daha yavaş ağ bağlantıları yaşarlar. Mobil performans için optimizasyon yapmak, mobil cihazlarda sorunsuz bir kullanıcı deneyimi sağlamak için çok önemlidir.

İşte bazı mobile özgü optimizasyon teknikleri:

• Duyarlı resimler kullanın: Ağ üzerinden aktarılan veri miktarını azaltmak için cihazın ekran boyutuna göre farklı resim boyutları sunun.
• Dokunma için optimize edin: Düğmelerin ve bağlantıların dokunmatik cihazlarda kolayca dokunulabilir olacak kadar büyük olduğundan ve yeterli boşluğa sahip olduğundan emin olun.
• HTTP isteklerini en aza indirin: CSS ve JavaScript dosyalarını birleştirerek, kritik CSS'i satır içi yaparak ve CSS sprite'ları kullanarak HTTP isteklerinin sayısını azaltın.
• Ekranın üst kısmındaki içeriğe öncelik verin: Web sitesinin algılanan performansını iyileştirmek için önce ekranda görünen içeriği yükleyin.

Navigation ve Resource Timing'in Ötesi: Diğer Performans API'lerini Keşfetme

Navigation ve Resource Timing temel olmakla birlikte, Frontend Performans API'si derinlemesine performans analizi için bir dizi başka araç sunar:

• User Timing API: Özel performans metrikleri tanımlamanıza ve uygulamanızdaki belirli olayların gerçekleşmesi için geçen süreyi ölçmenize olanak tanır.
• Long Tasks API: Ana iş parçacığını engelleyen ve uygulamanızın duyarlılığını etkileyen uzun süren görevleri belirlemenize yardımcı olur.
• Paint Timing API: First Paint (FP) ve First Contentful Paint (FCP) gibi sayfanın oluşturulmasıyla ilgili metrikler sağlar.
• Largest Contentful Paint (LCP): Görüntü alanındaki en büyük içerik öğesinin görünür hale gelmesi için geçen süreyi ölçer.
• Cumulative Layout Shift (CLS): Sayfa yüklemesi sırasında meydana gelen beklenmedik düzen kaymalarının miktarını ölçer.
• Event Timing API: Tıklama ve tuşa basma etkinlikleri gibi kullanıcıların sayfayla olan etkileşimleri hakkında ayrıntılı zamanlama bilgileri sunar.

Performans Verilerini Analiz Etme Araçları

Navigation ve Resource Timing verilerini analiz etmenize ve performans darboğazlarını belirlemenize yardımcı olabilecek birkaç araç vardır:

• Tarayıcı Geliştirici Araçları: Çoğu modern tarayıcı, Navigation ve Resource Timing verilerini incelemenize, ağ isteklerini analiz etmenize ve JavaScript kodunu profillemenize olanak tanıyan yerleşik geliştirici araçları sağlar.
• WebPageTest: Web sitenizin performansını farklı konumlardan ve tarayıcılardan test etmenizi sağlayan ücretsiz bir çevrimiçi araçtır.
• Lighthouse: Web sayfalarının kalitesini artırmak için açık kaynaklı, otomatik bir araçtır. Performans, erişilebilirlik, progresif web uygulamaları, SEO ve daha fazlası için denetimlere sahiptir.
• Google PageSpeed Insights: Web sitenizin performansını analiz eden ve iyileştirme için öneriler sunan ücretsiz bir çevrimiçi araçtır.
• New Relic, Datadog ve diğer APM araçları: Web uygulamaları için ayrıntılı performans izleme ve analiz yetenekleri sunar.

Web Performansı Optimizasyonu için En İyi Uygulamalar

İşte web performansı optimizasyonu için bazı genel en iyi uygulamalar:

• HTTP İsteklerini En Aza İndirin: CSS ve JavaScript dosyalarını birleştirerek, CSS sprite'ları kullanarak ve kritik CSS'i satır içi yaparak HTTP isteklerinin sayısını azaltın.
• Bir İçerik Dağıtım Ağı (CDN) Kullanın: Web sitenizin içeriğini farklı bölgelerdeki kullanıcılar için gecikmeyi azaltmak amacıyla küresel olarak birden fazla sunucuya dağıtın.
• Resimleri Optimize Edin: Resimleri sıkıştırın, uygun dosya formatlarını (ör. WebP) kullanın ve duyarlı resimler kullanın.
• CSS ve JavaScript'i Küçültün ve Sıkıştırın: CSS ve JavaScript dosyalarının dosya boyutlarını küçülterek ve sıkıştırarak azaltın.
• Tarayıcı Önbelleklemesinden Yararlanın: Sunucunuzu, tarayıcıların statik kaynakları önbelleğe almasına izin verecek şekilde uygun önbellek başlıklarını ayarlayacak şekilde yapılandırın.
• Web Yazı Tiplerini Optimize Edin: Web yazı tiplerini alt kümeleyin, font-display özelliklerini kullanın ve yazı tiplerini kendi alan adınızda barındırın.
• Kritik Olmayan Kaynakların Yüklenmesini Erteleyin: Ekranın alt kısmındaki resimler için tembel yükleme kullanın ve kritik olmayan JavaScript dosyalarının yüklenmesini erteleyin.
• Performansı Düzenli Olarak İzleyin: Performans sorunlarını proaktif olarak belirlemek ve gidermek için Frontend Performans API'sini ve diğer araçları kullanarak web sitenizin performansını sürekli olarak izleyin.

Sonuç

Frontend Performans API'si, özellikle de Navigation ve Resource Timing API'leri, web sitenizin performansına ilişkin paha biçilmez bilgiler sağlar. Bu API'leri anlayarak ve kullanarak, performans darboğazlarını belirleyebilir, web sitenizi daha hızlı yükleme süreleri için optimize edebilir ve nihayetinde küresel kitleniz için daha iyi bir kullanıcı deneyimi sağlayabilirsiniz. Eğrinin önünde kalmak ve hızlı, duyarlı ve ilgi çekici bir çevrimiçi deneyim sağlamak için web sitenizin performansını sürekli olarak izlemeyi ve optimizasyon stratejilerinizi gerektiği gibi uyarlamayı unutmayın.